import React, { useEffect, useState } from "react";
import { List, NavBar, Avatar } from "antd-mobile";
import styles from "./Index.module.css";
import { useNavigate } from "react-router-dom";

function Index() {
  const user = localStorage.getItem("nickName");
  const email = localStorage.getItem("email");
  const nav = useNavigate();



  return (
    <div className={styles.myxinz}>
      <div className={styles.nav}>
        <NavBar onBack={() => nav(-1)} style={{ marginTop: "10px" }}>
          我的信息
        </NavBar>
      </div>

      <div className={styles.list}>
        <List>
          <List.Item>
            头像
            <span>
              <Avatar
                src=""
                style={{
                  "--border-radius": "50%",
                  marginLeft: "300px",
                  marginTop: "-30px",
                }}
              />
            </span>
          </List.Item>

          <List.Item onClick={()=>nav('/setname')}>
            昵称 <span style={{ marginLeft: "200px" }}>{user}</span>
          </List.Item>
        </List>
      </div>

      <div className={styles.list2}>
        <List>
          <List.Item onClick={() => {}}>
            性别<span><img style={{ marginLeft: "260px" }} src="./nan.png" alt="" /></span>

          </List.Item>
          <List.Item onClick={() => {}}>
            体征
            </List.Item>
        </List>
      </div>

      <div className={styles.list2}>
        <List>
          <List.Item onClick={() => {}}>
            邮箱
            <span style={{ marginLeft: "120px" }}>{email}</span>
          </List.Item>
          <List.Item onClick={() => {}}>
            绑定微信
            <span style={{ marginLeft: "200px" }}>去绑定</span>
          </List.Item>
        </List>
      </div>

      <div className={styles.list2}>
        <List>
          <List.Item onClick={() => {}}>
            实名认证
            <span style={{ marginLeft: "200px" }}>去认证</span>
          </List.Item>
          <List.Item onClick={()=>nav('/bangyin')}>
            绑定银行卡
            <span style={{ marginLeft: "190px" }}>去绑定</span>
          </List.Item>
        </List>
      </div>
    </div>
  );
}

export default Index;
